<template>
    <div>
	    <div class="main_operation">
        <div class="operation_left">
               <a-button v-if="userInfo.is_root === 1" class="mr10" type="danger" @click="batchDelBtn">批量删除</a-button>
        </div>
        <div class="operation_right">
          <a-select allowClear class="mr5" style="width: 200px" v-model="formList.equipment_id" @change="val=>equipChange(val)" placeholder="设备名称">
            <a-select-option v-for="item in equipmentData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
          </a-select>
          <a-select allowClear v-if="formList.equipment_id" class="mr5" style="width: 160px" v-model="formList.agreement_id" placeholder="设备数据">
            <a-select-option v-for="item in itemDetail" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
          </a-select>
          <a-range-picker style="width: 220px" class="mr5"  @change="onDateChange" />
          <a-input-search style="width: 200px" v-model="formList.tasks_name" @search="val=>{formList.page = 1;changeData()}" placeholder="请输入任务名称" enterButton="查询" />
        </div>
      </div>

	    <div class="main">
	      <a-table :pagination="false"
	        :loading="tableLoad" :columns="Fields"
	        :dataSource="dataLists.data"
            :rowSelection="{ fixed: true, selectedRowKeys: selectedRowKeys, columnWidth: 40, onChange: onSelectChange }"
	        :rowKey="record => record.id"
	        :scroll="{x: 1400, y: 500 }">
	      </a-table>

	      <div class="pageBox">
	        <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page"
	          :defaultCurrent="1" @change="pageChange" />
	      </div>
	    </div>
	</div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import Vue from 'vue';
import { USER } from '@/store/mutation-types';

export default {
  name: 'execute',
  data() {
    return {
      /* 通用模块 */
      // 列表
      tableLoad: false, // 列表loading状态
      formList: { // 列表信息
        page: 1,
      },
      selectedRowKeys: [], // 勾选的id
      /* 通用模块end */
    };
  },
  mounted() {
    this.changeData();
  },
  computed: {
    userInfo() {
      return Vue.ls.get(USER);
    },
    ...mapState({
      Fields: state => state.timing.Fields,
      dataLists: state => state.timing.dataLists,
      equipmentData: state => state.equipment.equipmentData, // 设备名称信息
      itemDetail: state => state.equiRegister.itemDetail,
    }),
  },
  methods: {
    ...mapActions({
      getLists: 'timing/getRecordLists', // 列表
      dataDel: 'timing/dataDel', // 删除
      equipmentAll: 'equipment/equipmentAll', // 设备名称信息
      registerDetail: 'equiRegister/registerDetail', // 所有设备寄存器信息
    }),
    // 批量删除
    batchDelBtn() {
      if (this.selectedRowKeys.length <= 0) {
        this.$warning({
          title: '提示',
          content: '请先勾选需要删除的设备',
        });
        return false;
      }
      const _this = this;
      const idArr = this.selectedRowKeys;
      console.log(idArr);
      this.$confirm({
        title: '您确定要删除勾选的设备吗?',
        content: '删除后将不可恢复,请仔细核对!',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          _this.dataDel(idArr);
          _this.changeData();
        },
      });
    },
    /* 通用模块 */
    // 勾选
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    // 重新获取列表数据
    changeData() {
      this.tableLoad = true;
      setTimeout(() => {
        this.getLists(this.formList);
        this.tableLoad = false;
      }, 800);
    },
    // 页码
    pageChange(page) {
      this.formList.page = page;
      this.getLists(this.formList);
    },
    /* 通用模块end */
    equipChange(val) {
      delete this.formList.agreement_id;
      this.registerDetail(val);
    },
    onDateChange(date, dateStrings) {
      console.log(date, dateStrings);
      this.formList.created_start = dateStrings[0];
      this.formList.created_end = dateStrings[1];
      if (!date.length) {
        delete this.formList.created_start;
        delete this.formList.created_end;
      }
    },
  },
};
</script>

<style scoped>

</style>
